<template>
    <div style="width: 100%; height: 100%">
        <div class="basicKnowledgeContainers">
            <div class="basicKnowledgeContainers_content">
                <div class="basicKnowledgeContainers_content_left">
                    <leftNav :leftArr="leftArr"></leftNav>
                </div>
                <div class="basicKnowledgeContainers_content_rightContainers">
                    <div class="basicKnowledgeContainers_content_right">
                        <div class="basicKnowledgeContainers_content_right_textcontent" v-html="textContent">

                        </div>
                        <div class="basicKnowledgeContainers_content_right_imgcontent">
                            <img src="https://img1.baidu.com/it/u=397651648,97537492&fm=253&fmt=auto&app=138&f=JPEG?w=497&h=342"
                                alt="" class="basicKnowledgeContainers_content_right_imgcontent_img" />
                            <img src="https://pic1.zhimg.com/80/v2-cd8504854ce684ecb70e07ab8505b144_720w.webp" alt=""
                                class="basicKnowledgeContainers_content_right_imgcontent_img" />
                            <img src="http://www.aikeji.top:5016/images/ybl_20231009_1696837353815_68a9ae44667711ee973f0242ac110002.mrxs_priview.jpg"
                                alt="" class="basicKnowledgeContainers_content_right_imgcontent_img" />
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
</template>

<script>
import leftNav from './leftNav.vue'
export default {
    name: 'basicKnowledge',
    components: {
        leftNav
    },
    data() {
        return {
            leftArr: [{
                id: 1,
                label: '风湿病',
                num: 500,
                level: 1,
                children: [{
                    id: 11,
                    label: '风湿性心脏病',
                    num: 500,
                    level: 2,
                    children: [{
                        id: 111,
                        label: '风湿性性内膜炎',
                        level: 3,
                        num: 200,
                    }, {
                        id: 112,
                        label: '风湿性心肌炎',
                        level: 3,
                        num: 300,
                    }]
                }, {
                    id: 12,
                    label: '风湿性关节炎',
                    num: 500,
                    level: 2,
                    children: []
                }, {
                    id: 13,
                    label: '皮肤病变',
                    num: 500,
                    level: 2,
                    children: []
                }]
            }, {
                id: 2,
                label: '感染性心内膜炎',
                num: 500,
                level: 1,
                children: []
            }
            ],
            textContent: '<div>发育正常的实质细胞、组织或器官体积缩小。是因实质细胞体积缩小所致，可伴细胞数量减少称为萎缩。常有间质细胞增生。萎缩常有间质细胞增生。萎缩的机制还不明，可能主要涉及到蛋白合成和降解的平衡。蛋白降解的增加起关键作用萎缩包括自身实质细胞数量的减少和自身实质细胞体积的减小,亦根据起始原因分为病理性萎缩和生理性萎缩,生理性常见于胸腺的青春期萎缩和生殖系统中卵巢，子宫及睾丸的更年期后萎缩等，病理性萎缩一般有：<div>1，营养不良性萎缩：蛋白质摄入不足或者血液等消耗过多引起。如冠状动脉粥样硬化时因慢性心肌缺血引起心肌萎缩，再如脑缺血，引起脑组织萎缩。可由全身或局部因素引起。全身营养不良性萎缩见于长期饥饿、消化道梗阻、慢性消耗性疾病及恶性肿瘤等，由于蛋白质摄入不足或者血液等消耗过多引起全身器官萎缩，这种萎缩常按一定顺序发生，即脂肪组织首先发生萎缩，其次是肌肉，再其次是肝、脾、肾等器官，而心、脑的萎缩发生最晚。局部营养不良性萎缩常因局部慢性缺血引起，如脑动脉粥样硬化引起的脑萎缩。</div><div>2，压迫性萎缩：组织或器官长时间受压迫所致。如尿路梗阻（结石、肿瘤等）时，因肾盂积水压迫肾实质引起肾萎缩。引起这种萎缩的压力无需太大，关键是一定的压力持续存在。</div><div>3，废用性萎缩：器官长时间功能和代谢下降所致。例如，骨折后，久卧不动的肌肉因代谢减慢可逐渐发生萎缩。</div><div>4，去神经性萎缩：因运动神经元或者轴突损害引起效应器萎缩。例如，小儿麻痹症的肌肉萎缩下运动神经元损伤后，其所支配的器官、组织可发生萎缩，如脊髓灰质炎所致的下肌肉萎缩。</div><div>5，内分泌性萎缩：由于内分泌腺功能下降引起靶器官细胞萎缩。例如，绝经后，子宫的萎缩</div></div>',


        };
    },
    mounted() {
        const { state } = this.$store;


    },
    computed: {
        device() {
            return this.$store.state.device
        }
    },
    methods: {


    },
};
</script>

<style scoped lang="scss">
.basicKnowledgeContainers {
    background: #fff;
    height: 100%;
    width: 100%;

    &_content {
        display: flex;
        align-content: center;
        height: 100%;
        width: 100%;

        &_left {
            width: 140px;
            height: 100%;
            border-right: 1px solid #ddd;
            overflow-y: auto;
        }

        &_left::-webkit-scrollbar {
            width: 4px;
        }

        &_left::-webkit-scrollbar-track {
            border-radius: 10px;
            /*滚动条的背景区域的圆角*/
            -webkit-box-shadow: inset 0 0 6px rgba(238, 238, 238, 0.3);
            background-color: #eeeeee;
            cursor: pointer;
            /*滚动条的背景颜色*/
        }

        &_left::-webkit-scrollbar-thumb {
            border-radius: 10px;
            /*滚动条的圆角*/
            -webkit-box-shadow: inset 0 0 6px rgba(145, 143, 0143, 0.3);
            background-color: #3a62d7 !important;
            cursor: pointer;
            /*滚动条的背景颜色*/
        }

        &_rightContainers {
            width: calc(100% - 145px);
            height: 100%;
            box-sizing: border-box;
            padding: 10px;
        }

        &_right {
            width: 100%;
            height: 100%;
            overflow-y: auto;

            &_textcontent {
                font-size: 14px;
                line-height: 28px;
                text-indent: 2em;
            }

            &_imgcontent {
                display: flex;
                align-items: center;
                flex-wrap: wrap;

                &_img {
                    width: 200px;
                    height: 200px;
                    border: 1px solid #eee;
                    display: block;
                    margin: 5px;
                    cursor: pointer;
                    background: #f7f7f7;
                }
            }
        }

        &_right::-webkit-scrollbar {
            width: 4px;
            display: none;
        }
    }
}
</style>
